﻿@model int?

@{
    ViewData["Title"] = "Entity Dialog as Panel";
}

@section ContentHeader {
    <h1>@ViewData["Title"]<small></small></h1>
}

<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <p>This sample demonstrates how to use an entity dialog as an inline panel. Try operations below:</p>
    <br />
    <ul>
        <li><a href="~/BasicSamples/EntityDialogAsPanel/">Switch to new record mode by changing URL</a></li>
        <li><a href="~/BasicSamples/EntityDialogAsPanel/11068">Load Order with ID 11068 by changing URL</a></li>
        <li><a href="javascript:myDialogAsPanel.load({}, function() { Q.notifySuccess('Switched to new record mode'); })">Switch to new record mode with Javascript</a></li>
        <li><a href="javascript:myDialogAsPanel.load(11048, function() { Q.notifySuccess('Loaded entity with ID 11048'); })">Load Order with ID 11048 with javascript</a></li>
        <li><a href="~/BasicSamples/EntityDialogAsPanel/11077">Back to Order with ID 11077 by changing URL</a></li>
    </ul>

    <p style="text-align: right;">
        <b>Source Files:</b>
        @Html.AppSourceFile("Index.cshtml"),
        @Html.AppSourceFile("EntityDialogAsPanel.ts")
    </p>
</div>

<div id="DialogDiv"></div>

<script type="text/javascript">
    var myDialogAsPanel;
    jQuery(function () {
        // first create a new dialog
        myDialogAsPanel = new Serene.BasicSamples.EntityDialogAsPanel();
        // load a new entity if url doesn't contain an ID, or load order with ID specified in page URL
        // here we use done event in second parameter, to be sure operation succeeded before showing the panel
        myDialogAsPanel.load(@Html.Raw(Model.ToJson()) || {}, function() {
            // if we didn't reach here, probably there is no order with specified ID in url
            myDialogAsPanel.element.removeClass('hidden').appendTo('#DialogDiv');
            myDialogAsPanel.arrange();
        });
    });
</script>
